<template>
  <div class="px-[40px] pt-[20px]">
    <CustomTitle title="取样点列表"> </CustomTitle>
    <div class="w-[100%] mt-[10px]">
      <a-table
        id="tableRef"
        :scroll="{ y: 250, x: '100%' }"
        ref="tableRef"
        :loading="loading"
        class
        :pagination="false"
        :columns="columns"
        :data-source="tableData"
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'history'">
            <img src="@/assets/images/history_record.png" class="w-[20px] h-[20px] cursor-pointer" @click="handleHistory(record)" />
          </template>
          <template v-if="column.key === 'status'">
            <div v-if="record.abnormal_count > 0" class="flex items-center">
              <span class="text-[#F83253] w-[8px] h-[8px] bg-[#F83253] rounded-[5px] inline-block mr-[5px]"></span>
              <span class="text-[#F83253]" v-if="record.abnormal_count > 0">异常</span>
            </div>
            <div v-else class="flex items-center">
              <span class="text-[#E6E6E6] w-[8px] h-[8px] bg-[#E6E6E6] rounded-[5px] inline-block mr-[5px]"></span>
              <span class="text-[#E6E6E6]">正常</span>
            </div>
          </template>
          <template v-if="column.key === 'analysis_count'">
            <div @click="handleAnalysis(record)" class="cursor-pointer">
              <span :class="record.abnormal_count > 0 ? 'text-[#F83253]' : 'text-[#E6E6E6]'">{{ record.abnormal_count }}</span> /
              <span>{{ record.analysis_count }}</span>
            </div>
          </template>
          <!-- <template v-if="column.key === 'analysis_time'">
            <span>{{ dayjs(record.analysis_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
          </template> -->
        </template>
      </a-table>
      <!-- <a-table ref="tableRef" :scroll="{ y: 200, x: '100%' }" :loading="loading" class :pagination="false" :columns="columns" :data-source="data"> </a-table> -->
    </div>
  </div>
</template>
<script setup lang="ts">
import { onBeforeMount, onUnmounted, ref } from 'vue';
import { default_columns } from './columns';
import { apiGetAnalysisSampingPoints } from '@/http/api';
import { iAnalysisSampingPoints } from '@/interface/iAnalysisSampingPoints';

const props = defineProps<{ days: number }>();
const columns: any = ref(default_columns);
const tableData = ref<iAnalysisSampingPoints[]>([]);
const loading = ref(false);
const tableRef = ref('');
const router = useRouter();
// const getData = async () => {
//   try {
//     loading.value = true;
//   } catch (error) {
//   } finally {
//     loading.value = false;
//   }
// };
const getData = async () => {
  if (props.days === 0) return;
  loading.value = true;
  try {
    const res = await apiGetAnalysisSampingPoints(props.days);
    tableData.value = res.data;
    handleData(res.data);
  } catch (error) {
  } finally {
    loading.value = false;
  }
};

const handleData = (data: any) => {
  const set = new Set();
  data.forEach((item: any) => {
    set.add(item.analysis_project);
  });
  const project = columns.value.filter((item: any) => item.title === '分析项目');
  const arr: any = [];
  Array.from(set).forEach(item => {
    arr.push({
      text: item,
      value: item,
    });
  });
  project[0].filters = arr;
};

const filterProject = (name: string) => {
  // columns.value = default_columns.filter((item: any) => item.dataIndex !== name);
  const project = columns.value.filter((item: any) => item.title === '分析项目');
  project[0].filteredValue = [name];
};
const handleTableChange = (_: any, filters: any, __: any) => {
  if (filters) {
    if (filters.analysis_project) {
      const project = columns.value.filter((item: any) => item.title === '分析项目');
      project[0].filteredValue = filters.analysis_project;
    } else {
      const project = columns.value.filter((item: any) => item.title === '分析项目');
      project[0].filteredValue = [];
    }
    if (filters.status) {
      const status = columns.value.filter((item: any) => item.title === '状态');
      status[0].filteredValue = filters.status;
    } else {
      const status = columns.value.filter((item: any) => item.title === '状态');
      status[0].filteredValue = [];
    }
  } else {
    const project = columns.value.filter((item: any) => item.title === '分析项目');
    project[0].filteredValue = [];
    const status = columns.value.filter((item: any) => item.title === '状态');
    status[0].filteredValue = [];
  }
};
const handleAnalysis = (record: any) => {
  if (record.abnormal_count > 0) {
    handleHistory(record, 'abnormal');
  }
};

const handleHistory = (record: any, status: string = '') => {
  router.push({
    // path: '/data_report/history_c/detail',
    name: 'data_report_history_id',
    query: { measurement: record.analysis_project, sampling_pt: record.name, status, ip: record.device_ip, port: record.device_port },
  });
};

watch(
  () => props.days,
  () => {
    getData();
  }
);

defineExpose({
  refresh: getData,
  filterProject: filterProject,
});
const queryData = async () => {
  getData();
};
onBeforeMount(() => {
  queryData();
});
onUnmounted(() => {});
</script>
<style lang="less" scoped></style>
